<template>
	<view>
		<u-tabbar :value="tabBarIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" :border="false"
			activeColor="#6072FF" inactiveColor="#0000007F">
			<u-tabbar-item :name="item.index" :text="item.title" v-for="(item,index) in tabBarList" :key="index"
				@tap="changeTabBar(item.index,item.topTitle)">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="staticFileUrl + item.activeIconUrl">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="staticFileUrl + item.inactiveIconUrl">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar-device-stats",
		data() {
			return {
				staticFileUrl: this.$configPath.staticFileUrl,
				tabBarList: [{
						index: 0,
						topTitle: '出货统计',
						title: '商品报表',
						activeIconUrl: '/image/tabbar-stats/stats-data-select.png',
						inactiveIconUrl: '/image/tabbar-stats/stats-data.png',
					},
					{
						index: 1,
						topTitle: '出货统计',
						title: '机器报表',
						activeIconUrl: '/image/tabbar-stats/day-stats-select.png',
						inactiveIconUrl: '/image/tabbar-stats/day-stats.png',
					}
				],
				tabBarIndex: 0,
				canClick: true, // 初始状态允许点击
			};
		},
		methods: {
			Load() {
				const menu = this.tabBarList[this.tabBarIndex];
				this.changeTabBar(this.tabBarIndex, menu.topTitle,true);
			},
			changeTabBar(e, t,isInit = false) {
				if(this.tabBarIndex == e && !isInit){
					return;
				}
				this.tabBarIndex = e;
				uni.$emit("tabbarDeviceStats", {
					msg: '66',
					index: e
					})
					setTimeout(() => {
					uni.setNavigationBarTitle({
						title: t
					});
					if (e == 1) {
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: "#6072FF"
						})
					} else {
						uni.setNavigationBarColor({
							frontColor: '#000000',
							backgroundColor: "#F8F8F8"
						})
					}
				}, 500)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>
